21 tháng 8, 2025Tiếng Việt

Tìm hiểu sâu về Decorator trong JavaScript, khám phá cú pháp, các trường hợp sử dụng cho lập trình siêu dữ liệu, các phương pháp hay nhất và tác động đến khả năng bảo trì mã nguồn. Bao gồm ví dụ thực tế và định hướng tương lai.

Decorator trong JavaScript: Triển khai Lập trình Siêu dữ liệu

Decorator trong JavaScript là một tính năng mạnh mẽ cho phép bạn thêm siêu dữ liệu (metadata) và sửa đổi hành vi của các lớp, phương thức, thuộc tính và tham số một cách tường minh và có thể tái sử dụng. Đây là một đề xuất ở giai đoạn 3 trong quy trình tiêu chuẩn của ECMAScript và được sử dụng rộng rãi với TypeScript, vốn có cách triển khai riêng (hơi khác một chút). Bài viết này sẽ cung cấp một cái nhìn tổng quan toàn diện về Decorator trong JavaScript, tập trung vào vai trò của chúng trong lập trình siêu dữ liệu và minh họa cách sử dụng bằng các ví dụ thực tế.

Decorator trong JavaScript là gì?

Decorator là một mẫu thiết kế giúp tăng cường hoặc sửa đổi chức năng của một đối tượng mà không làm thay đổi cấu trúc của nó. Trong JavaScript, decorator là các loại khai báo đặc biệt có thể được đính kèm vào các lớp, phương thức, accessor, thuộc tính hoặc tham số. Chúng sử dụng ký hiệu @ theo sau là một hàm sẽ được thực thi khi phần tử được trang trí được định nghĩa.

Hãy nghĩ về decorator như các hàm nhận phần tử được trang trí làm đầu vào và trả về một phiên bản đã sửa đổi của phần tử đó, hoặc thực hiện một số tác vụ phụ dựa trên nó. Điều này cung cấp một cách sạch sẽ và thanh lịch để thêm chức năng mà không cần thay đổi trực tiếp lớp hoặc hàm gốc.

Các khái niệm chính:

Hàm Decorator: Hàm được đặt trước bởi ký hiệu @. Nó nhận thông tin về phần tử được trang trí và có thể sửa đổi nó.
Phần tử được trang trí: Lớp, phương thức, accessor, thuộc tính hoặc tham số được trang trí.
Siêu dữ liệu (Metadata): Dữ liệu mô tả dữ liệu. Decorator thường được sử dụng để liên kết siêu dữ liệu với các phần tử mã nguồn.

Cú pháp và Cấu trúc

Cú pháp cơ bản của một decorator như sau:

@decorator
class MyClass {
  // Thành viên của lớp
}

Ở đây, @decorator là hàm decorator và MyClass là lớp được trang trí. Hàm decorator được gọi khi lớp được định nghĩa và có thể truy cập cũng như sửa đổi định nghĩa của lớp.

Decorator cũng có thể chấp nhận các đối số, được truyền vào chính hàm decorator:

@loggable(true, "Thông điệp tùy chỉnh")
class MyClass {
  // Thành viên của lớp
}

Trong trường hợp này, loggable là một hàm factory decorator, nhận các đối số và trả về hàm decorator thực tế. Điều này cho phép tạo ra các decorator linh hoạt và có thể cấu hình hơn.

Các loại Decorator

Có nhiều loại decorator khác nhau, tùy thuộc vào đối tượng mà chúng trang trí:

Decorator cho Lớp: Áp dụng cho các lớp.
Decorator cho Phương thức: Áp dụng cho các phương thức trong một lớp.
Decorator cho Accessor: Áp dụng cho các accessor getter và setter.
Decorator cho Thuộc tính: Áp dụng cho các thuộc tính của lớp.
Decorator cho Tham số: Áp dụng cho các tham số của một phương thức.

Decorator cho Lớp

Decorator cho lớp được sử dụng để sửa đổi hoặc tăng cường hành vi của một lớp. Chúng nhận hàm khởi tạo (constructor) của lớp làm đối số và có thể trả về một hàm khởi tạo mới để thay thế hàm gốc. Điều này cho phép bạn thêm các chức năng như ghi log, tiêm phụ thuộc (dependency injection), hoặc quản lý trạng thái.

Ví dụ:

function loggable(constructor: Function) {
  console.log("Lớp " + constructor.name + " đã được tạo.");
}

@loggable
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // Xuất ra: Lớp User đã được tạo.

Trong ví dụ này, decorator loggable ghi một thông báo ra console mỗi khi một instance mới của lớp User được tạo. Điều này có thể hữu ích cho việc gỡ lỗi hoặc giám sát.

Decorator cho Phương thức

Decorator cho phương thức được sử dụng để sửa đổi hành vi của một phương thức trong một lớp. Chúng nhận các đối số sau:

target: Prototype của lớp.
propertyKey: Tên của phương thức.
descriptor: Đối tượng mô tả thuộc tính (property descriptor) cho phương thức.

Descriptor cho phép bạn truy cập và sửa đổi hành vi của phương thức, chẳng hạn như bọc nó bằng logic bổ sung hoặc định nghĩa lại hoàn toàn.

Ví dụ:

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Đang gọi phương thức ${propertyKey} với các đối số: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Phương thức ${propertyKey} trả về: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Xuất ra log cho lệnh gọi phương thức và giá trị trả về

Trong ví dụ này, decorator logMethod ghi lại các đối số và giá trị trả về của phương thức. Điều này có thể hữu ích cho việc gỡ lỗi và theo dõi hiệu suất.

Decorator cho Accessor

Decorator cho accessor tương tự như decorator cho phương thức nhưng được áp dụng cho các accessor getter và setter. Chúng nhận các đối số giống như decorator cho phương thức và cho phép bạn sửa đổi hành vi của accessor.

Ví dụ:

function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalSet = descriptor.set;

  descriptor.set = function (value: any) {
    if (value < 0) {
      throw new Error("Giá trị phải không âm.");
    }
    originalSet.call(this, value);
  };
}

class Temperature {
  private _celsius: number;

  constructor(celsius: number) {
    this._celsius = celsius;
  }

  @validate
  set celsius(value: number) {
    this._celsius = value;
  }

  get celsius(): number {
    return this._celsius;
  }
}

const temperature = new Temperature(25);
temperature.celsius = 30; // Hợp lệ
// temperature.celsius = -10; // Gây ra lỗi

Trong ví dụ này, decorator validate đảm bảo rằng giá trị nhiệt độ không âm. Điều này có thể hữu ích để thực thi tính toàn vẹn của dữ liệu.

Decorator cho Thuộc tính

Decorator cho thuộc tính được sử dụng để sửa đổi hành vi của một thuộc tính lớp. Chúng nhận các đối số sau:

target: Prototype của lớp (đối với thuộc tính của instance) hoặc hàm khởi tạo của lớp (đối với thuộc tính tĩnh).
propertyKey: Tên của thuộc tính.

Decorator cho thuộc tính có thể được sử dụng để định nghĩa siêu dữ liệu hoặc sửa đổi descriptor của thuộc tính.

Ví dụ:

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Configuration {
  @readonly
  apiUrl: string = "https://api.example.com";
}

const config = new Configuration();
// config.apiUrl = "https://newapi.example.com"; // Gây ra lỗi trong chế độ nghiêm ngặt (strict mode)

Trong ví dụ này, decorator readonly làm cho thuộc tính apiUrl chỉ đọc, ngăn không cho nó bị sửa đổi sau khi khởi tạo. Điều này có thể hữu ích để định nghĩa các giá trị cấu hình bất biến.

Decorator cho Tham số

Decorator cho tham số được sử dụng để sửa đổi hành vi của một tham số phương thức. Chúng nhận các đối số sau:

target: Prototype của lớp (đối với phương thức của instance) hoặc hàm khởi tạo của lớp (đối với phương thức tĩnh).
propertyKey: Tên của phương thức.
parameterIndex: Chỉ mục của tham số trong danh sách tham số của phương thức.

Decorator cho tham số ít được sử dụng hơn các loại decorator khác, nhưng chúng có thể hữu ích để xác thực các tham số đầu vào hoặc tiêm phụ thuộc.

Ví dụ:

function required(target: any, propertyKey: string, parameterIndex: number) {
  const existingRequiredParameters: number[] = Reflect.getOwnMetadata(propertyKey, target, "required") || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata(propertyKey, existingRequiredParameters, target, "required");
}

function validateMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function () {
    let requiredParameters: number[] = Reflect.getOwnMetadata(propertyName, target, "required");
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (arguments[parameterIndex] === null || arguments[parameterIndex] === undefined) {
          throw new Error(`Thiếu đối số bắt buộc tại chỉ mục ${parameterIndex}`);
        }
      }
    }

    return method.apply(this, arguments);
  };
}


class ArticleService {
  create(
    @required title: string,
    @required content: string
  ): void {
    console.log(`Đang tạo bài viết với tiêu đề: ${title} và nội dung: ${content}`);
  }
}

const service = new ArticleService();
// service.create("Bài viết của tôi", null); // Gây ra lỗi
service.create("Bài viết của tôi", "Nội dung bài viết"); // Hợp lệ

Trong ví dụ này, decorator required đánh dấu các tham số là bắt buộc, và decorator validateMethod đảm bảo rằng các tham số này không phải là null hoặc undefined. Điều này có thể hữu ích để thực thi việc xác thực đầu vào của phương thức.

Lập trình Siêu dữ liệu với Decorator

Một trong những trường hợp sử dụng mạnh mẽ nhất của decorator là lập trình siêu dữ liệu. Siêu dữ liệu là dữ liệu về dữ liệu. Trong bối cảnh lập trình, đó là dữ liệu mô tả cấu trúc, hành vi và mục đích của mã nguồn của bạn. Decorator cung cấp một cách sạch sẽ và tường minh để liên kết siêu dữ liệu với các lớp, phương thức, thuộc tính và tham số.

API Reflect Metadata

API Reflect Metadata là một API tiêu chuẩn cho phép bạn lưu trữ và truy xuất siêu dữ liệu được liên kết với các đối tượng. Nó cung cấp các hàm sau:

Reflect.defineMetadata(key, value, target, propertyKey): Định nghĩa siêu dữ liệu cho một thuộc tính cụ thể của một đối tượng.
Reflect.getMetadata(key, target, propertyKey): Truy xuất siêu dữ liệu cho một thuộc tính cụ thể của một đối tượng.
Reflect.hasMetadata(key, target, propertyKey): Kiểm tra xem siêu dữ liệu có tồn tại cho một thuộc tính cụ thể của một đối tượng hay không.
Reflect.deleteMetadata(key, target, propertyKey): Xóa siêu dữ liệu cho một thuộc tính cụ thể của một đối tượng.

Bạn có thể sử dụng các hàm này kết hợp với decorator để liên kết siêu dữ liệu với các phần tử mã nguồn của mình.

Ví dụ: Định nghĩa và Truy xuất Siêu dữ liệu

import 'reflect-metadata';

const logKey = "log";

function log(message: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    Reflect.defineMetadata(logKey, message, target, key);

    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      console.log(Reflect.getMetadata(logKey, target, key));
      const result = originalMethod.apply(this, args);
      return result;
    }

    return descriptor;
  }
}

class Example {
  @log("Đang thực thi phương thức")
  myMethod(arg: string): string {
    return `Phương thức được gọi với ${arg}`;
  }
}

const example = new Example();
example.myMethod("Xin chào"); // Xuất ra: Đang thực thi phương thức, Phương thức được gọi với Xin chào

Trong ví dụ này, decorator log sử dụng API Reflect Metadata để liên kết một thông báo log với phương thức myMethod. Khi phương thức được gọi, decorator sẽ truy xuất và ghi thông báo ra console.

Các trường hợp sử dụng cho Lập trình Siêu dữ liệu

Lập trình siêu dữ liệu với decorator có nhiều ứng dụng thực tế, bao gồm:

Tuần tự hóa và Phi tuần tự hóa: Chú thích các thuộc tính bằng siêu dữ liệu để kiểm soát cách chúng được tuần tự hóa hoặc phi tuần tự hóa sang/từ JSON hoặc các định dạng khác. Điều này có thể hữu ích khi xử lý dữ liệu từ các API hoặc cơ sở dữ liệu bên ngoài, đặc biệt trong các hệ thống phân tán đòi hỏi chuyển đổi dữ liệu trên các nền tảng khác nhau (ví dụ: chuyển đổi định dạng ngày tháng giữa các tiêu chuẩn khu vực khác nhau). Hãy tưởng tượng một nền tảng thương mại điện tử xử lý địa chỉ giao hàng quốc tế, nơi bạn có thể sử dụng siêu dữ liệu để chỉ định định dạng địa chỉ chính xác và các quy tắc xác thực cho từng quốc gia.
Dependency Injection (Tiêm phụ thuộc): Sử dụng siêu dữ liệu để xác định các phụ thuộc cần được tiêm vào một lớp. Điều này đơn giản hóa việc quản lý các phụ thuộc và thúc đẩy khớp nối lỏng (loose coupling). Hãy xem xét một kiến trúc microservices nơi các dịch vụ phụ thuộc lẫn nhau. Decorator và siêu dữ liệu có thể tạo điều kiện cho việc tiêm động các client dịch vụ dựa trên cấu hình, cho phép mở rộng quy mô và khả năng chịu lỗi dễ dàng hơn.
Xác thực (Validation): Định nghĩa các quy tắc xác thực dưới dạng siêu dữ liệu và sử dụng decorator để tự động xác thực dữ liệu. Điều này đảm bảo tính toàn vẹn của dữ liệu và giảm mã soạn sẵn (boilerplate code). Ví dụ, một ứng dụng tài chính toàn cầu cần tuân thủ các quy định tài chính khu vực khác nhau. Siêu dữ liệu có thể định nghĩa các quy tắc xác thực cho định dạng tiền tệ, tính toán thuế và giới hạn giao dịch dựa trên vị trí của người dùng, đảm bảo tuân thủ luật pháp địa phương.
Định tuyến và Middleware: Sử dụng siêu dữ liệu để định nghĩa các route và middleware cho các ứng dụng web. Điều này đơn giản hóa việc cấu hình ứng dụng của bạn và làm cho nó dễ bảo trì hơn. Một mạng lưới phân phối nội dung (CDN) phân tán toàn cầu có thể sử dụng siêu dữ liệu để định nghĩa các chính sách bộ nhớ đệm và quy tắc định tuyến dựa trên loại nội dung và vị trí của người dùng, tối ưu hóa hiệu suất và giảm độ trễ cho người dùng trên toàn thế giới.
Ủy quyền và Xác thực: Liên kết các vai trò, quyền và yêu cầu xác thực với các phương thức và lớp, tạo điều kiện cho các chính sách bảo mật tường minh. Hãy tưởng tượng một tập đoàn đa quốc gia có nhân viên ở các phòng ban và địa điểm khác nhau. Decorator có thể định nghĩa các quy tắc kiểm soát truy cập dựa trên vai trò, phòng ban và vị trí của người dùng, đảm bảo rằng chỉ những nhân viên được ủy quyền mới có thể truy cập dữ liệu và chức năng nhạy cảm.

Các phương pháp hay nhất

Khi sử dụng Decorator trong JavaScript, hãy xem xét các phương pháp hay nhất sau:

Giữ Decorator đơn giản: Decorator nên tập trung và thực hiện một nhiệm vụ duy nhất, được xác định rõ ràng. Tránh logic phức tạp bên trong decorator để duy trì khả năng đọc và bảo trì.
Sử dụng Factory Decorator: Sử dụng factory decorator để cho phép các decorator có thể cấu hình. Điều này làm cho decorator của bạn linh hoạt và có thể tái sử dụng hơn.
Tránh tác dụng phụ: Decorator chủ yếu nên tập trung vào việc sửa đổi phần tử được trang trí hoặc liên kết siêu dữ liệu với nó. Tránh thực hiện các tác dụng phụ phức tạp bên trong decorator có thể làm cho mã của bạn khó hiểu và khó gỡ lỗi hơn.
Sử dụng TypeScript: TypeScript cung cấp hỗ trợ tuyệt vời cho decorator, bao gồm kiểm tra kiểu và IntelliSense. Sử dụng TypeScript có thể giúp bạn phát hiện lỗi sớm và cải thiện trải nghiệm phát triển của mình.
Ghi tài liệu cho Decorator của bạn: Ghi tài liệu rõ ràng cho các decorator của bạn để giải thích mục đích và cách chúng nên được sử dụng. Điều này giúp các nhà phát triển khác dễ dàng hiểu và sử dụng decorator của bạn một cách chính xác.
Cân nhắc về hiệu suất: Mặc dù decorator rất mạnh mẽ, chúng cũng có thể ảnh hưởng đến hiệu suất. Hãy lưu ý đến các tác động hiệu suất của decorator của bạn, đặc biệt là trong các ứng dụng quan trọng về hiệu suất.

Ví dụ về Quốc tế hóa với Decorator

Decorator có thể hỗ trợ quốc tế hóa (i18n) và địa phương hóa (l10n) bằng cách liên kết dữ liệu và hành vi cụ thể theo ngôn ngữ với các thành phần mã nguồn:

Ví dụ: Định dạng Ngày tháng được Địa phương hóa

import 'reflect-metadata';

interface DateFormatOptions {
  locale: string;
  options?: Intl.DateTimeFormatOptions;
}

const dateFormatKey = 'dateFormat';

function formatDate(options: DateFormatOptions) {
  return function(target: any, propertyKey: string) {
    Reflect.defineMetadata(dateFormatKey, options, target, propertyKey);
  };
}

class Event {
  @formatDate({ locale: 'fr-FR', options: { year: 'numeric', month: 'long', day: 'numeric' } })
  startDate: Date;

  constructor(startDate: Date) {
    this.startDate = startDate;
  }

  getFormattedStartDate(): string {
    const options: DateFormatOptions = Reflect.getMetadata(dateFormatKey, Object.getPrototypeOf(this), 'startDate');
    return this.startDate.toLocaleDateString(options.locale, options.options);
  }
}

const event = new Event(new Date());
console.log(event.getFormattedStartDate()); // Xuất ra ngày tháng theo định dạng tiếng Pháp

Ví dụ: Định dạng Tiền tệ dựa trên Vị trí người dùng

import 'reflect-metadata';

interface CurrencyFormatOptions {
  locale: string;
  currency: string;
}

const currencyFormatKey = 'currencyFormat';

function formatCurrency(options: CurrencyFormatOptions) {
  return function(target: any, propertyKey: string) {
    Reflect.defineMetadata(currencyFormatKey, options, target, propertyKey);
  };
}

class Product {
  @formatCurrency({ locale: 'de-DE', currency: 'EUR' })
  price: number;

  constructor(price: number) {
    this.price = price;
  }

  getFormattedPrice(): string {
    const options: CurrencyFormatOptions = Reflect.getMetadata(currencyFormatKey, Object.getPrototypeOf(this), 'price');
    return this.price.toLocaleString(options.locale, { style: 'currency', currency: options.currency });
  }
}

const product = new Product(99.99);
console.log(product.getFormattedPrice()); // Xuất ra giá tiền theo định dạng Euro của Đức

Những lưu ý trong tương lai

Decorator trong JavaScript là một tính năng đang phát triển và tiêu chuẩn vẫn đang trong quá trình hoàn thiện. Một số lưu ý trong tương lai bao gồm:

Tiêu chuẩn hóa: Tiêu chuẩn ECMAScript cho decorator vẫn đang trong quá trình thực hiện. Khi tiêu chuẩn phát triển, có thể có những thay đổi về cú pháp và hành vi của decorator.
Tối ưu hóa hiệu suất: Khi decorator được sử dụng rộng rãi hơn, sẽ có nhu cầu tối ưu hóa hiệu suất để đảm bảo rằng chúng không ảnh hưởng tiêu cực đến hiệu suất ứng dụng.
Hỗ trợ công cụ: Hỗ trợ công cụ được cải thiện cho decorator, chẳng hạn như tích hợp IDE và các công cụ gỡ lỗi, sẽ giúp các nhà phát triển sử dụng decorator hiệu quả hơn.

Kết luận

Decorator trong JavaScript là một công cụ mạnh mẽ để triển khai lập trình siêu dữ liệu và tăng cường hành vi của mã nguồn của bạn. Bằng cách sử dụng decorator, bạn có thể thêm chức năng một cách sạch sẽ, tường minh và có thể tái sử dụng. Điều này dẫn đến mã nguồn dễ bảo trì, dễ kiểm thử và có khả năng mở rộng hơn. Hiểu các loại decorator khác nhau và cách sử dụng chúng hiệu quả là điều cần thiết cho việc phát triển JavaScript hiện đại. Decorator, đặc biệt khi kết hợp với API Reflect Metadata, mở ra một loạt các khả năng, từ tiêm phụ thuộc và xác thực đến tuần tự hóa và định tuyến, làm cho mã của bạn biểu cảm hơn và dễ quản lý hơn.